<template>
  <el-form ref="xSearchFormRef" :model="model" :size="size" v-bind="$attrs">
    <div :id="filterDomEle" style="display: flex; flex-wrap: wrap">
      <slot />
      <el-form-item>
        <template v-if="showSearchBtn">
          <el-button type="primary" icon="search" @click="handleSearch">查询</el-button>
          <el-button icon="refresh" @click="handleReset">重置</el-button>
          <slot name="ext-btn" />
        </template>
        <el-link v-show="collapsiable" @click="shiftCollapsiable">
          <span>
            {{ fold ? "收起" : "展开" }}
          </span>
          <i-ep-arrow-up v-if="fold" />
          <i-ep-arrow-down v-else />
        </el-link>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup lang="ts">

// 定义接收的属性
interface Props {
  model: Object
  size?: any
  showNumber?: number
  showSearchBtn?: boolean
  filterDomEle?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  filterDomEle: 'xFilterDomEle',
  showNumber: 3,
  showSearchBtn: true,
})



// 自定义事件
const emit = defineEmits<{
  search: [queryParams: Object]
  reset: [queryParams: Object]
}>()

const collapsiable = ref(false)
const fold = ref(false)
const xSearchFormRef = ref()

const minShowCtrol = () => {

  // 通过maxShow控制元素显示/折叠
  const group = window.document.querySelectorAll(`#${props.filterDomEle} .el-form-item  `)
  const len = group.length ? group.length - 1 : 0
  if (props.showNumber === 0) {
    return
  }
  if (props.showNumber < len) {
    group.forEach((item: any, index) => {
      if (index > props.showNumber - 1 && index < len) {
        item.hidden = !fold.value
        item.style.display = !fold.value ? 'none' : ''
      }
    })
    collapsiable.value = true
  } else {
    collapsiable.value = false
  }


}

onMounted(() => {
  minShowCtrol()
})

const shiftCollapsiable = () => {
  fold.value = !fold.value
  minShowCtrol()
}

const handleSearch = () => {
  emit('search', props.model)
}

const handleReset = () => {
  if (xSearchFormRef.value) {
    xSearchFormRef.value.resetFields()
  }
  emit('reset', props.model)
}

const reset = () => {
  if (xSearchFormRef.value) {
    xSearchFormRef.value.resetFields()
  }
}

// 暴露的属性和方法
defineExpose({ reset })

</script>

<style lang="scss" scoped></style>
